<template>
  <el-card class="main">
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索："> </el-form-item>
      <el-form-item label="">
        <el-input
          size="small"
          v-model="search"
          placeholder="输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
          size="small"
          v-model="mobileSearch"
          placeholder="输入手机号"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-table
      row-key="date"
      align="center"
      ref="filterTable"
      :data="
        recordData.filter(
          (data) =>
            (!search ||
              data.user.name.toLowerCase().includes(search.toLowerCase())) &&
            (!mobileSearch || data.account.mobile.includes(mobileSearch))
        )
      "
      border
      style="width: 100%; text-align: center"
    >
      <el-table-column
        prop="date"
        label="进出时间"
        sortable
        min-width="150px"
        width="180"
        column-key="date"
        align="center"
      >
        <template #default="scope">
          <div>
            <i class="el-icon-time"></i> {{ scope.row.record.data_time }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="identity"
        label="身份"
        width="120"
        filter-placement="bottom-end"
        :filters="[
          { text: '住户', value: 'host' },
          { text: '访客', value: 'user' },
        ]"
        :filter-method="identityFilter"
        align="center"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.account.identity == 'host'">住户</el-tag>
          <el-tag v-else type="info">访客</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        align="center"
        min-width="120px"
      >
        <template #default="scope">
          <el-tag type="success">{{ scope.row.user.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter"
        align="center"
        min-width="150px"
        width="180px"
      >
        <template #default="scope">
          <div>{{ scope.row.user.address }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="method"
        label="出入方式"
        filter-placement="bottom-end"
        :filters="[
          { text: '人脸识别', value: 'face' },
          { text: '输码进入', value: 'code' },
        ]"
        :filter-method="filterTag"
        align="center"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.record.method == 'face'">人脸识别</el-tag>
          <el-tag v-else type="info">输码进入</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="detail" label="查看" align="center">
        <template #default="scope">
          <el-button @click="getUserInfo(scope.row)" size="mini"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog
    title="个人信息"
    v-model="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <template #footer>
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label=""
          ><span v-if="userIdentity == 'host'">
            <img :src="imgPath" class="userImg" />
          </span>
          <span v-else> <img src="/img/user.jpg" class="userImg" /> </span
        ></el-descriptions-item>
        <el-descriptions-item label="用户名">
          <span>
            {{ userInfo.user.name }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="用户名">{{
          userInfo.user.name
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          userInfo.account.mobile
        }}</el-descriptions-item>
        <el-descriptions-item label="联系地址" :span="2">{{
          userInfo.user.address
        }}</el-descriptions-item>
      </el-descriptions>

      <!-- <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </template>
  </el-dialog>
</template>

<script>
import { get } from "@/network/record.js";

export default {
  name: "AdminAccord",
  data() {
    return {
      recordData: [],
      userInfo: { user: { name: "", address: "" }, account: { mobile: "" } },
      dialogVisible: false,
      imgPath: "/api/host/getimg",
      userIdentity: "",
      search: "",
      mobileSearch: "",
    };
  },
  created() {
    get()
      .then(
        (res) => {
          if (res.code == 200) {
            this.recordData = res.data;
            console.log(this.recordData);
          } else {
            this.$message.error(res.data);
          }
        },
        (err) => {
          this.$message.error("网络错误");
        }
      )
      .catch((err) => {
        this.$message.error("网络错误");
      });
  },
  methods: {
    filterTag(value, row) {
      return row.record.method === value;
    },
    identityFilter(value, row) {
      return row.account.identity === value;
    },
    getUserInfo(row) {
      this.imgPath = "/api/host/getimg";
      this.dialogVisible = true;
      this.userInfo = row;
      this.imgPath = this.imgPath + "/" + row.account.mobile;
      this.userIdentity = row.account.identity;
      console.log(this.userIdentity);
    },
  },
};
</script>

<style scoped>
.main {
  min-height: 100%;
}
.userImg {
  width: 100px;
  /* width: 100px; */
}
</style>